import React, { PureComponent } from "react";

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      userName: 'niko'
    }
  }

  inputChange(e) {
    this.setState({
      userName: e.target.value
    })
  }
  render() {

    const { userName } = this.state
    return (
      <div>
        <div>{userName}</div>
        {/* 非受控组件 */}
        <input type="text" onChange={(e) => this.inputChange(e)} />
        {/* 
          input绑定state中的值后变成受控组件，
          此时无法通过输入值改变input中的值，
          必须绑定onChange才能改变input的值
        */}
        <input type="text" value={userName} onChange={(e) => this.inputChange(e)} />
      </div>
    )
  }
}

export default App;
